<template>
    <view class="content columnbox wdh-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">订单申述</text>
			</template>
		</u-navbar>
        <view class="info-box columnbox wdh-100">
            
            <view class="width_699 fn_hsds  display displayColumn M-T30">
				<view class="fn_one display  width-100 fontSize font_comm displaycenter_aliem M-T24">
					<span class="fn_one_txt1 M-L24">{{info.stationName}}</span>
				</view>
				<view class="fn_two display  width-100 M-T16">
					<view class="fn_two_left display ">
						<image class="images M-L24" :src="img1" mode=""></image>
					</view>
					<view class="fn_two_right M-L16 display  width-100 displayColumn fontSize font_comm">
						<view class="fn_two_right_top width-100 display  displaycenter_aliem" style="margin-top: 5rpx;">
							<span class="fn_two_txt1">{{info.doorName}}</span>
						</view>
						<view class="fn_two_right_bottom display width-100  displaycenter_aliem " style="margin-top: 60rpx">
							<span class="fn_two_txt1" style="#232323">{{info.beginTime}}</span>
							<!-- <span class="fn_two_txt4 M-R24">x1</span> -->
						</view>
					</view>
				</view>
            </view>
            
           
            
            <view class="display  width_699 displayColumn content-box" style="margin-top: 20rpx;">
				<view class="fn_hs_one width_699 display  displaycenter_aliem  fontSize font_comm M-T24">
					<span class="fn_vv1 M-L24">申述金额</span>
					<span class="fn_two_txt3 M-R24">￥<span style="font-size: 40rpx;">{{info.payCash}}</span></span>
				</view>
				<view class="fn_hs_one width_699 display  displaycenter_aliem  fontSize font_comm M-T24">
					<span class="fn_vv1 M-L24">申述理由</span>
					  <uni-data-select
					  style="width: 250rpx;background: #F6F6F6;margin-right: 24rpx;"
					  placeholder="选择退款理由"
					      v-model="value"
					      :localdata="range"
					      @change="change"
					    ></uni-data-select>
				</view>
				<view class="fn_hs_one width_699 display  displaycenter_aliem  fontSize font_comm M-T24">
					<span class="fn_vv1 M-L24 ">备注</span>
				</view>
				<view class="fnsk display displayColumn width_699 M-T8">
					
					<textarea v-model="content" class="input-box M-L24 M-T8" placeholder="请输入"></textarea>
					<view class="img-list wdh-100 M-L24">
					    <view class="one-img rowbox" v-for="(item,index) in imglist" :key='index'>
					        <image mode="aspectFill" :src="item"></image>
					    </view>
					    <view @click="addImg" class="img-box rowbox">+</view>
					</view>
				</view>
            </view>
            
           
            <view class="wdh-100 send-btn rowbox" @click="submitInfo">确认申述</view>
            
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
				 value: 1,
				      range: [],
					   appeal_type:'',
                complaintType: 0,
                content: '',
                imglist: [],
                phone: '',
                submitflag: false,
				info:{},
				img1:this.$imgUrls + 'c17ef17e7d3048bf965b486b02b63390.jpg'
            };
        },
		onLoad(options) {
			// console.log(options)
			this.info = JSON.parse(options.json);
			console.log(this.info)
			//获取参数列表
			this.getList();
		},
        methods: {
			
			change(e) {
			      console.log("e:", e);
				  this.appeal_type = this.range[e].value
			    },
            showRecord() {
                uni.navigateTo({
                    url: './record'
                })
            },
            async submitInfo() {
                    uni.showLoading({
                        title: '正在提交'
                    })
                    let list = []
                    for (var i = 0; i < this.imglist.length; i++) {
                        list.push(await this.sendImg(this.imglist[i], i))
                    }
					
                    let data = {
						appealType:this.appeal_type,//申述类型
						appealContent: this.content,//申述内容
                        urls: list.join(','),
						orderId:this.info.orderId
                    }
					console.log(data)
                    this.$req.post('/xcx/orderAppeal', data).then(res => {
						console.log(res)
                        uni.hideLoading()
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        })
                        if (res.data.code == 200) {
                            this.imglist = []
                            this.phone = ''
                            this.content = ''
                            this.complaintType = 0
							this.$tab.navigateBack();
                        }else{
							this.$modal.msg(res.data.msg)
						}
                    })
            },
            sendImg(url, index) {
                return new Promise(resolve => {
                    this.$req.uploadImg(url).then(res => {
						console.log(res)
                        if (index == this.imglist.length - 1) {
                            // resolve(res.data.url)
							resolve(res.data.ossId)
                        } else {
                            setTimeout(() => {
                                // resolve(res.data.url)
								resolve(res.data.ossId)
                            }, 5000)
                        }
                    })
                })
            },
            addImg() {
                uni.chooseImage({
                    success: (res) => {
                        this.imglist = this.imglist.concat(res.tempFilePaths)
                    }
                })
            },
			getList(){
				this.$req.get(`/xcx/dict/data/type/appeal_type`).then(res=>{
					console.log(res)
					for(let i=0;i<res.data.data.length;i++){
						this.$set(res.data.data[i],'value',res.data.data[i].dictValue)
						this.$set(res.data.data[i],'text',res.data.data[i].dictLabel)
					}
					
					console.log(res.data.data)
					this.range = res.data.data;
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.dissd{
		padding:10rpx ;
		min-width: 150rpx;
		height: 100rpx;
		border-radius: 20rpx;
		border: 2rpx solid #3c81a1;
	}
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        overflow: hidden;
    }
.images{
	width: 132rpx;
	height: 132rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
    .info-box {
        padding: 0 32rpx;
    }

    .info-title {
        padding: 20rpx 0;
        padding-bottom: 10rpx;
        font-size: 32rpx;
        margin-top: 20rpx;
    }

    .q-box {
        background: #fff;
        border-radius: 10rpx;
        margin-top: 10rpx;
        padding: 20rpx 20rpx;
        color: #17698F;
        font-size: 28rpx;
    }

    .type-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 10rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx 20rpx;
        box-sizing: border-box;
    }

    .one-type {
        background: #f8f8f8;
        color: #9d9e9d;
        font-size: 28rpx;
        border: #bfc1c1 solid 1px;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }

    .sel-type {
        border: #17698F solid 1px;
        color: #17698F;
    }

    .input-box {
        font-size: 28rpx;
        width: 100%;
    }

    .content-box {
        background: #fff;
        border-radius: 10rpx;
        margin-top: 10rpx;
        padding-bottom: 20rpx;
        width: 100%;
		width: 690rpx;
		
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .img-box {
        width: 150rpx;
        height: 150rpx;
        border: #B2B2B2 dotted 1px;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
    }

    .one-img {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        position: relative;
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;

        image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
        }
    }

    .send-btn {
        border-radius: 100rpx;
        margin-top: 40rpx;
    }

    .r-btn {
        color: #17698F;
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        margin: 40rpx 0;
    }
	.fn_hsds{
		width: 690rpx;
		height: 230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_one_txt1{
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
	}
	.fn_two_right_bottom{
		justify-content: space-between;
	}
	.fn_two_txt1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_two_txt3{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_two_txt4{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_hs_one{
		justify-content: space-between;
	}
	.fn_vv1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}
	.fnsk{
		
		height: 324rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>